<template>
  <div class="page-container">
    <div class="header">
      <span style="width: 100%;display: flex;"><el-button icon="el-icon-back"
          @click="$router.push('/main/biao/jibenxz')">返回</el-button></span>
      <h2>职员基本薪资核定表列表</h2>
    </div>

    <div class="search-bar">
      <div class="search-inputs">
        <el-input v-model="searchForm.name" placeholder="请输入姓名" prefix-icon="el-icon-user" clearable>
        </el-input>
        <el-input v-model="searchForm.employeeId" placeholder="请输入工号" prefix-icon="el-icon-notebook-2" clearable>
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="success" icon="el-icon-plus" @click="$router.push('/main/biao/jibenxz')">新增</el-button>
      </div>
      <!-- <div class="button-group">
      </div> -->
    </div>

    <div class="table-container">
      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="120">
        </el-table-column>
        <el-table-column prop="employeeId" label="工号" min-width="120">
        </el-table-column>
        <el-table-column prop="department" label="部门" min-width="150">
        </el-table-column>
        <el-table-column prop="position" label="职位" min-width="150">
        </el-table-column>
        <el-table-column prop="startDate" label="入职日期" min-width="150">
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-view" @click="viewDetail(scope.row.id)">
              详情
            </el-button>
            <el-button size="mini" type="warning" icon="el-icon-edit" @click="handleEdit(scope.row.id)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteRecord(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
        :page-sizes="[10, 20, 30, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getSalaryList, deleteSalary } from '@/api/salary'

export default {
  data() {
    return {
      searchForm: {
        name: '',
        employeeId: ''
      },
      tableData: [],
      current: 1,
      size: 10,
      total: 0,
      loading: false
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const response = await getSalaryList({
          current: this.current,
          size: this.size,
          name: this.searchForm.name,
          employeeId: this.searchForm.employeeId
        })

        if (response.data) {
          this.tableData = response.data.records
          this.total = response.data.total
        }
      } catch (error) {
        this.$message.error('获取列表失败：' + error.message)
      } finally {
        this.loading = false
      }
    },
    search() {
      this.current = 1
      this.fetchData()
    },
    handleSizeChange(val) {
      this.size = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.current = val
      this.fetchData()
    },
    viewDetail(id) {
      this.$router.push({
        path: '/main/biao/jibenxz',
        query: {
          id: id,
          type: 'view'
        }
      })
    },
    handleEdit(id) {
      this.$router.push({
        path: '/main/biao/jibenxz',
        query: {
          id: id,
          type: 'edit'
        }
      })
    },
    async deleteRecord(id) {
      try {
        await this.$confirm('确认删除该记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        await deleteSalary(id)
        this.$message.success('删除成功')
        this.fetchData()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败：' + error.message)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 24px;
  // background: #ffffff;
  border-radius: 8px;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 48px);
  width: 1200px;
  margin: 0 auto;
}

.header {
  margin-bottom: 24px;

  h2 {
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    padding: 0;
  }
}

.search-bar {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;

  .search-inputs {
    display: flex;
    gap: 16px;
    flex: 1;
    justify-content: center;

    .el-input {
      max-width: 220px;
    }
  }

  .button-group {
    display: flex;
    gap: 12px;

    .el-button {
      padding: 10px 20px;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.table-container {
  margin-bottom: 24px;

  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;

    th {
      background-color: #f5f7fa;
      color: #2c3e50;
      font-weight: 600;
      padding: 12px 0;

      &.is-leaf {
        border-bottom: 1px solid #ebeef5;
      }
    }

    td {
      padding: 12px 0;
    }

    .el-button {
      padding: 6px 12px;
      margin: 0 4px;

      [class^="el-icon-"] {
        margin-right: 4px;
      }
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 24px 0;

  :deep(.el-pagination) {
    padding: 0;
    margin: 0;
    font-weight: normal;

    .el-pagination__total,
    .el-pagination__sizes,
    .el-pagination__jump {
      margin-right: 16px;
    }

    .btn-prev,
    .btn-next {
      padding: 0 12px;
      border-radius: 4px;

      &:hover {
        color: #409EFF;
      }
    }

    .el-pager li {
      padding: 0 12px;
      border-radius: 4px;

      &:hover {
        color: #409EFF;
      }

      &.active {
        background-color: #409EFF;
        color: #ffffff;
      }
    }
  }
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .page-container {
    padding: 16px;
  }

  .search-bar {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;

    .search-inputs {
      flex-direction: column;

      .el-input {
        max-width: 100%;
      }
    }

    .button-group {
      flex-direction: column;

      .el-button {
        width: 100%;
      }
    }
  }

  .table-container {
    :deep(.el-table) {
      .el-button {
        margin: 4px;
      }
    }
  }
}

/* 打印样式 */
@media print {
  .page-container {
    padding: 0;
    box-shadow: none;
  }

  .search-bar,
  .pagination-container {
    display: none;
  }

  .table-container {
    :deep(.el-table) {
      border: 1px solid #000;

      th,
      td {
        border: 1px solid #000;
      }
    }
  }
}
</style>